import Quill from 'quill';

const BlockEmbed = Quill.import('blots/block/embed');

class DividerBlot extends BlockEmbed {
  static blotName = 'divider';
  static tagName = 'figure';
  static className = 'img-box';

  static create(value): any {
    const node = super.create(value);
    node.setAttribute('contenteditable', 'false');
    const imgDom = document.createElement('img');

    imgDom.setAttribute('src', value.url);
    if (value.width !== undefined) {
      imgDom.setAttribute('width', value.width);
    }
    if (value.height !== undefined) {
      imgDom.setAttribute('height', value.height);
    }

    node.appendChild(imgDom);
    return node;
  }

  static value(node): any {
    const imgDom = node.querySelector('img');
    return {
      url: imgDom.getAttribute('src'),
      width: imgDom.getAttribute('width'),
      height: imgDom.getAttribute('height')
    };
  }
}

export default DividerBlot;
